<template>
	<div>
		<div class="choice-wrapper">
			<div class="choice-title">请选择您的身份（可多选）</div>
			<div class="choice-box">
				<checker v-model="Checkbox" type="checkbox" default-item-class="choice-item" selected-item-class="choice-item-selected">
					<label v-for="data in usertype">
						<checker-item :value="data.id">
							<i class="yzh" v-if="data.id==4"></i>
							<i class="jxs" v-if="data.id==3"></i>
							<i class="pfs" v-if="data.id==5"></i>
							<i class="yzj" v-if="data.id==1"></i>
							<i class="yf" v-if="data.id==2"></i>
							<i class="scqy" v-if="data.id==6"></i>
							<i class="qt" v-if="data.id==7"></i>
							<span>{{data.name}}</span>
						</checker-item>
					</label>
				</checker>
		    </div>
		    <button type="button" v-bind:disabled="!Checkbox.length" v-bind:class="{choiceabl:Checkbox.length}" class="choice-reter" @click="choice">选好了</button>
		</div>
	</div>
</template>

<script>
import { Checker, CheckerItem} from 'vux'
export default {
	data () {
		    return {
		    usertype:[],
		    Checkbox:[],
		    }
		},
	props: ['id'],
	methods: {
	choice(){
	 	let data = {'userTypes':this.Checkbox,'id':this.id};
		axios.post('/api/oauth/usertype', data).then((res)=>{
		    this.$router.push('/oauth/home');
			});	
		}
	},
	mounted() {
		axios.get('/api/oauth/usertype').then(ret => {
		this.usertype = ret.data.resp_data;
		});
	},
	components: { Checker, CheckerItem }
}		
</script>

<style>
@import url("../../styles/common/oauth/oauth-common.css");
.choice-wrapper{padding:12px;}
.choice-wrapper .choice-title{height: 30px;line-height: 30px;color: #333;font-size: 15px;text-align: center;}
.choice-box{padding:10px 0;}
.choice-item{margin:10px 3%;width: 25%;height: 80px;text-align: center;}
.choice-item i{display: block;margin:0 auto;width: 50px;height: 50px;border-radius: 50%;}
.choice-item i.yzh{background: url(../../static/oauth-img/auth01.png) no-repeat;background-size:50px 50px;}
.choice-item i.jxs{background: url(../../static/oauth-img/auth05.png) no-repeat;background-size:50px 50px;}
.choice-item i.pfs{background: url(../../static/oauth-img/auth06.png) no-repeat;background-size:50px 50px;}
.choice-item i.yzj{background: url(../../static/oauth-img/auth02.png) no-repeat;background-size:50px 50px;}
.choice-item i.yf{background: url(../../static/oauth-img/auth03.png) no-repeat;background-size:50px 50px;}
.choice-item i.scqy{background: url(../../static/oauth-img/auth04.png) no-repeat;background-size:50px 50px;}
.choice-item i.qt{background: url(../../static/oauth-img/auth07.png) no-repeat;background-size:50px 50px;}
.choice-item span{line-height:30px;font-size:14px;color: #333;}
.choice-item-selected i.yzh{background: url(../../static/oauth-img/done-auth01.png) no-repeat;background-size:50px 50px;}
.choice-item-selected i.jxs{background: url(../../static/oauth-img/done-auth05.png) no-repeat;background-size:50px 50px;}
.choice-item-selected i.pfs{background: url(../../static/oauth-img/done-auth06.png) no-repeat;background-size:50px 50px;}
.choice-item-selected i.yzj{background: url(../../static/oauth-img/done-auth02.png) no-repeat;background-size:50px 50px;}
.choice-item-selected i.yf{background: url(../../static/oauth-img/done-auth03.png) no-repeat;background-size:50px 50px;}
.choice-item-selected i.scqy{background: url(../../static/oauth-img/done-auth04.png) no-repeat;background-size:50px 50px;}
.choice-item-selected i.qt{background: url(../../static/oauth-img/done-auth07.png) no-repeat;background-size:50px 50px;}
.choice-item-selected span{color: #008CF0;}
.choice-reter{display:block;width:100%;height: 44px;background:#bbb;border-radius:5px;color: #fff;font-size: 15px;line-height: 44px;}
.choiceabl{background:#008CF0;}
</style>